---
title: Layer Styles
description: Learn how to use layer styles to define visual properties.
---

## Overview

Layer styles allows you to define visual properties. The common properties are:

- Color or text color
- Background color
- Border width and border color
- Box shadow
- Opacity

## Defining layer styles

Layer styles are defined using the `defineLayerStyles` function.

```js title="layer-styles.ts"
import { defineLayerStyles } from "@chakra-ui/react"

const layerStyles = defineLayerStyles({
  container: {
    description: "container styles",
    value: {
      bg: "gray.50",
      border: "2px solid",
      borderColor: "gray.500",
    },
  },
})
```

## Built-in layer styles

Chakra UI provides a set of built-in layer styles.

<ExamplePreview name="tokens/layer-style" />

## Updating the theme

To use the layer styles, update the `theme` object with the `layerStyles`
property.

```js title="theme.ts"
import { createSystem, defineConfig } from "@chakra-ui/react"
import { layerStyles } from "./layer-styles"

const config = defineConfig({
  theme: {
    layerStyles,
  },
})

export default createSystem(defaultConfig, config)
```

After updating the theme, run this command to generate the typings.

```bash
npx @chakra-ui/cli@next typegen
```

## Using layer styles

Now you can use `layerStyle` property in your components.

```jsx
<Box layerStyle="container">This is inside a container style</Box>
```
